<template>
  <div class="print-page">
    <p class="western" style="text-align: right;margin-right: 25px;">
      <el-button type="success" @click="printer()">打 印</el-button>
    </p>
    <div id="printContentDiv">
      <p class="western"><br />
      </p>
      <p class="western" style="margin-top: 0.01in"><br />
      </p>
      <div style="display: flex;justify-content: space-between;">
        <p style="line-height: 0.33in">
          <span class="sd-abs-pos" style="width: 213px"><img src="@/assets/img/img_01.png" name="Image 1" width="100"
              border="0" />
          </span>
        </p>
        <div style="text-align: center;">
          <p class="western" style="line-height: 0.19in">
            <font face="BM DoHyeon">
              <font size="4" style="font-size: 14pt">
                <font face="Droid Sans Fallback">云</font>南<font face="Droid Sans Fallback">上云丰</font>花卉有<font size="4"
                  style="font-size: 14pt">限</font>公<span style="letter-spacing: -0.5pt">
                  <font size="4" style="font-size: 14pt">司</font>
                </span>
              </font>
            </font>
            <br>
            <font face="Noto Sans CJK HK"><span style="letter-spacing: -0.1pt">地址</span></font>:
            昆明斗南花拍中心东区商业街<span>34</span>
            <font face="Noto Sans CJK HK"><span style="letter-spacing: -0.5pt">号</span></font>
          </p>
          <p class="western" style="text-align: center; line-height: 0.21in">Tel:0871-<span
              style="letter-spacing: -0.1pt">65098881</span>
          </p>
          <p class="western" style="margin-top: 0.01in">
            <!-- <img src="source._html_166069dc7dd5c999.gif" align="left">
      <br clear="left" />
      </img> -->
            <br />
          </p>
        </div>
      </div>
      <p class="western" style="margin-top: 0.19in"><br />
      </p>
      <p class="western" align="center" style="margin-top: 0in;text-align: center;">
        <font face="Noto Sans CJK HK">
          <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.5pt">
              <font size="2" style="font-size: 10pt"><b>销</b></font>
            </span></font>
        </font>
        <font size="2" style="font-size: 11pt">
          <font size="2" style="font-size: 9pt"><b> </b></font>
        </font>
        <font face="Noto Sans CJK HK">
          <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.5pt">
              <font size="2" style="font-size: 10pt"><b>售</b></font>
            </span></font>
        </font>
        <font size="2" style="font-size: 11pt">
          <font size="2" style="font-size: 9pt"><b> </b></font>
        </font>
        <font face="Noto Sans CJK HK">
          <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.5pt">
              <font size="2" style="font-size: 10pt"><b>订</b></font>
            </span></font>
        </font>
        <font size="2" style="font-size: 11pt">
          <font size="2" style="font-size: 9pt"><b> </b></font>
        </font>
        <font face="Noto Sans CJK HK">
          <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.5pt">
              <font size="2" style="font-size: 10pt"><b>单</b></font>
            </span></font>
        </font>
      </p>
      <p class="western" style="margin-top: 0.01in"><br />

      </p>
      <table width="100%" cellpadding="1" cellspacing="0">
        <col width="49" />

        <col width="18" />

        <col width="260" />

        <col width="38" />

        <col width="20" />

        <col width="16" />

        <col width="41" />

        <col width="4367" />

        <col width="74" />

        <col width="104" />

        <col width="71" />

        <tr valign="top">
          <td width="600" height="31"
            style="border-top: 1px solid #2c2c2c; border-bottom: 1px solid #808080; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.5pt">
                    <font size="2" style="font-size: 10pt">客 户</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="6" width="341"
            style="border-top: 1px solid #2c2c2c; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">{{ detailsData.extractName }}</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="1" width="59"
            style="border-top: 1px solid #2c2c2c; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt">联系方式</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="3" width="252"
            style="border-top: 1px solid #2c2c2c; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: -0.02in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.1pt">{{ detailsData.extractPhone
                    }}</span></font>
              </font>
            </p>
          </td>
        </tr>
        <tr valign="top">
          <td width="49" height="32"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">订单主题</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="6" width="341" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt">
                  <font size="2" style="font-size: 10pt">{{ detailsData.orderTitle }}</font>
                </font>
              </font>

            </p>
          </td>
          <td colspan="1" width="59" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: 1.2pt">
                    <font size="2" style="font-size: 10pt">订单号</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="3" width="252"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: -0.02in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.1pt">{{ detailsData.orderNo
                    }}</span>
                </font>
              </font>
            </p>
          </td>
        </tr>
        <tr valign="top">
          <td width="49" height="32"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">订单类型</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="6" width="341" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt">{{ detailsData.orderCategory }}</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="1" width="59" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: 1.2pt">
                    <font size="2" style="font-size: 10pt">签
                      单人</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="3" width="252"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: -0.02in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">{{ detailsData.shopUserName }}</font>
                  </span></font>
              </font>
            </p>
          </td>
        </tr>
        <tr valign="top">
          <td width="49" height="32"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">签单日期</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="6" width="341" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt">{{ detailsData.createTimeText }}</font>
              </font>
            </p>
          </td>
          <td colspan="1" width="59" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt">预计取货日期</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="3" width="252"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: -0.02in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt">{{ detailsData.takeTimeText }}</font>
              </font>
            </p>
          </td>
        </tr>
        <tr valign="top">
          <td width="49" height="32"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">订单总额</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="6" width="341" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.15in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt" v-if="detailsData.orderPrice">¥{{ detailsData.orderPrice }}
                </font>
              </font>
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt">
                  <font size="2" style="font-size: 10pt">（{{ detailsData.orderPriceUpper }}</font><span
                    style="letter-spacing: -0.5pt">
                    <font size="2" style="font-size: 10pt">）</font>
                  </span>
                </font>
              </font>
            </p>
          </td>
          <td colspan="1" width="59" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt">收货地址</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="3" width="252"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p>
              {{ detailsData.address }}
            </p>
          </td>
        </tr>
        <tr valign="top">
          <td width="49" height="32"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">需付定金</font>
                  </span></font>
              </font>
            </p>

          </td>
          <td colspan="6" width="341" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.15in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.2pt"
                    v-if="detailsData.depositPrice">¥{{ detailsData.depositPrice }}</span></font>
              </font>
            </p>
          </td>
          <td colspan="1" width="59" style="border: 1px solid #808080; padding: 0in 0in">
            <p style="margin-left: 0.01in; margin-top: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt">尚欠金额</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="3" width="252"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: 0.12in; margin-top: 0.05in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.1pt"
                    v-if="detailsData.unPayPrice">¥{{ detailsData.unPayPrice
                    }}</span></font>
              </font>
            </p>
          </td>
        </tr>
        <tr>
          <td colspan="11" width="707" height="30"
            style="border-top: 1px solid #808080; border-bottom: 1px solid #212121; border-left: 1px solid #2c2c2c; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt;font-weight: bold;">销售产品明细</font>
                  </span></font>
              </font>
            </p>
          </td>
        </tr>
        <tr valign="top">
          <td width="500" height="21" bgcolor="#ececec"
            style="border-top: 1px solid #212121; border-bottom: 1px solid #212121; border-left: 1.50pt solid #2c2c2c; border-right: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.1in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt"><b>产品名称</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="2" width="100" bgcolor="#ececec" style="border: 1px solid #212121; padding: 0in 0in">
            <p align="center" style="margin-left: 0.02in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt"><b>类型</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="1" width="300" bgcolor="#ececec" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.07in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt"><b>数量</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="3" width="500" bgcolor="#ececec" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.07in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt"><b>基地</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td width="100" bgcolor="#ececec" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.1in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt"><b>规格</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td width="100" bgcolor="#ececec" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.27in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt"><b>单价</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td width="100" bgcolor="#ececec" style="border: 1px solid #212121; padding: 0in 0in">
            <p align="center" style="margin-left: 0.01in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt"><b>总价</b></font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="2" width="500" bgcolor="#ececec"
            style="border-top: 1px solid #212121; border-bottom: 1px solid #212121; border-left: 1px solid #212121; border-right: 1.50pt solid #2c2c2c; padding: 0in 0in">
            <p style="margin-left: 0.1in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.2pt">
                    <font size="2" style="font-size: 10pt"><b>明细备注</b></font>
                  </span></font>
              </font>
            </p>
          </td>
        </tr>
        <tr valign="top" v-for="(val, index) in detailsData.productList">
          <td height="21"
            style="border-top: 1px solid #212121; border-bottom: 1px solid #212121; border-left: 1.50pt solid #2c2c2c; border-right: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.05in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">{{ val.productName }}</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="2" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.04in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.1pt">
                    <font size="2" style="font-size: 10pt">{{ val.orderProductType == 10 ? '销售' : val.orderProductType
                      ==
                      20 ? '赠品' : val.orderProductType == 30 ? '赔付' : '' }}</font>
                  </span></font>
              </font>

            </p>
          </td>
          <td colspan="1" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.04in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.3pt">{{ val.totalNum }}</span>
                </font>
              </font>
            </p>
          </td>
          <td colspan="3" width="600" style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.14in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.5pt">
                    <font size="2" style="font-size: 10pt">{{ val.productAddress }}</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td style="border: 1px solid #212121; padding: 0in 0in">
            <p align="right" style="margin-right: -0.01in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.2pt">{{ val.productAttr }}</span>
                </font>
              </font>
            </p>
          </td>
          <td style="border: 1px solid #212121; padding: 0in 0in">
            <p style="margin-left: 0.32in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.1pt">¥{{ val.productPrice
                    }}</span>
                </font>
              </font>
            </p>
          </td>
          <td style="border: 1px solid #212121; padding: 0in 0in">
            <p align="right" style="margin-right: 0.02in">
              <font size="2" style="font-size: 11pt">
                <font size="2" style="font-size: 10pt"><span style="letter-spacing: -0.1pt">¥{{ val.totalPayPrice
                    }}</span></font>
              </font>
            </p>
          </td>
          <td colspan="2"
            style="border-top: 1px solid #212121; border-bottom: 1px solid #212121; border-left: 1px solid #212121; border-right: 1.50pt solid #2c2c2c; padding: 0in 0in">
            <p>
              {{ val.remark }}
              <br />

            </p>
          </td>
        </tr>

        <tr valign="top">
          <td width="49" height="344"
            style="border-top: 1.50pt solid #808080; border-bottom: 1px solid #2c2c2c; border-left: 1px solid #2c2c2c; border-right: 1px solid #808080; padding: 0in 0in">
            <p>
              <br />

            </p>
            <p><br />

            </p>
            <p><br />

            </p>
            <p><br />

            </p>
            <p><br />

            </p>
            <p style="margin-top: 0.11in"><br />

            </p>
            <p style="margin-left: 0.2in">
              <font face="Noto Sans CJK HK">
                <font size="2" style="font-size: 11pt"><span style="letter-spacing: -0.3pt">
                    <font size="2" style="font-size: 10pt">备注</font>
                  </span></font>
              </font>
            </p>
          </td>
          <td colspan="10" width="657"
            style="border-top: 1.50pt solid #808080; border-bottom: 1px solid #2c2c2c; border-left: 1px solid #808080; border-right: 1px solid #2c2c2c; padding: 0in 0in">
            <div style="padding:0px 20px;" v-html="detailsData.templateText"></div>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import OrderApi from "@/api/order.js";
import print from 'print-js'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    Seltemplate: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      detailsData: {}
    };
  },
  created() {
    this.loadDetail(this.id)

  },
  methods: {
    loadDetail(id) {
      OrderApi.orderPrint({ orderId: id, templateId: this.Seltemplate.templateId }).then(res => {
        const { code, data } = res;
        if (code == 1) {
          this.detailsData = data
          console.log(this.detailsData, 'this.detailsData')

        }
      })
    },
    printer() {
      printJS({
        printable: 'printContentDiv',
        type: 'html',
        maxWidth: '750',
        scanStyles: false,
        style: '@page { size: auto;  margin: 0mm; } body { padding: 10mm; }'
      });
    },
  }

};
</script>
<style lang="scss" scoped>
.print-page {
  width: 750px;
  margin: 0 auto;
  position: relative;
}

@page {
  size: 8.27in 11.69in;
  margin-left: 0.35in;
  margin-right: 0.35in;
  margin-top: 0.56in
}

p {
  margin-bottom: 0in;
  direction: ltr;
  line-height: 100%;
  text-align: left;
  orphans: 0;
  widows: 0;
  background: transparent
}

p.western {
  font-family: "Noto Sans CJK HK", serif;
  font-size: 9pt;
  so-language: en-US
}

p.cjk {
  font-family: "Noto Sans CJK HK";
  font-size: 9pt;
  so-language: zh-CN
}

p.ctl {
  font-family: "Noto Sans CJK HK";
  font-size: 9pt;
  so-language: ar-SA
}
</style>
